<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/activitydetails.css" />
		<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			.mui-popover {
				height: 250px;
				width: 95%;
				box-shadow: 0px 0px 5px gray inset;
			}
			
			.mui-popover .mui-popover-arrow:after {
				box-shadow: 0px 0px 5px gray inset;
			}
			
			.mui-badge {
				margin: 0px;
			}
			
			.mui-bar-nav{
				border: none;
				outline: none;
				-webkit-box-shadow:none;
				box-shadow:none;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
			}
		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav header" style="background-color: white;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">召集详情</h1>
		</header>
		<div class="mui-content">
			<div id="activity">

				<div class="content_header clearbox">
					<div class="mui-row ">
						<div class="content_header_left mui-col-xs-3">
							<img class="header_avater" :src="add.avatar" />
						</div>
						<div class="content_header_right mui-col-xs-8">
							<h4 style="margin-top: 15px;font-size: 15px;" v-text="add.activityName"></h4>
							<p style="margin-top: 7px;" v-text="add.activityDate" ></p>
						</div>
					</div>
				</div>
				<div class="content_content">
					<div class="content_content_word mui-col-xs-12" v-text="add.activityContent"></div>
					<div class="content_content_img mui-col-xs-12">
						<img v-if="add.img!=''&&add.img!=null&&add.img!=undefined" id="figure" :src="add.img" / width="100%" height="100%" data-preview-src="" data-preview-group="1">
					</div>
				</div>
				<div class="content_footer">
					<div class="mui-row">
						<div v-if="add.activityLimit==0" class="content_footer_left mui-col-xs-6" >
							限制：男女不限
						</div>
						<div v-if="add.activityLimit==1" class="content_footer_left mui-col-xs-6" >
							限制：只限男生
						</div>
						<div v-if="add.activityLimit==2" class="content_footer_left mui-col-xs-6" >
							限制：只限女生
						</div>
						<div class="content_footer_right mui-col-xs-6 mui-text-right">
							已参加
							<a href="#middlePopover" class="join_word" id="jion_people" v-cloak>&nbsp;<span v-text="add.num"></span>&nbsp;</a>人
						</div>
					</div>
				</div>
			</div>
			<div class="talk" id="talk">
				<img class="talk_img" src="../img/speaks.png" />
			</div>
			<div class="join" id="join">
				<img class="join_img" src="../img/part.png" />
			</div>
			<div id="middlePopover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="joinpeople">
							<div class="mui-row">
								<h4 v-if="appdatatwo.length==0" style="margin: 50px;text-align: center;">暂无人员参加</h4>
								<div class="mui-col-xs-3" v-for="join in joinpeople">
									<div class="join_people_div">
										
										<img class="join_people_img" :src="join.avatar" />
										<span class="mui-badge mui-badge-danger" v-cloak style="font-size: 10px;" >信誉：<span v-text="join.reputation"></span></span>
										<h6 class="join_people_name" v-text="join.username"></h6>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/ip.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			var releaseid;
			var sexlimit;
			var activitylastDate;
			var activitylgnum;
			var activitysnum;
			//左滑退出
			document.addEventListener("swiperight", function() {
				mui.back();
			});
			//本页面的显示信息

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var activityid = self.activityid;
				mui.ajax('http://'+ip+'/xiaojv/Api/index.php?p=front&m=activity&a=activitydetails', {
					data: {'activityid': activityid},
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；           
					success: function(data) {
						appdataone = data.one[0];
						releaseid = appdataone.id;
						sexlimit = appdataone.activityLimit;
						activitylastDate = appdataone.lastDate;
						activitylgnum = appdataone.activityNum;
						activitysnum = appdataone.num;
						var one = new Vue({
							el: '#activity',
							data: {
								add: appdataone
							}
						});
						appdatatwo = data.two;
						var two = new Vue({
							el : '#joinpeople',
							data : {
								joinpeople : appdatatwo
							}
						});

					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
				//点讨论加按钮
			var talk = document.getElementById("talk");
			talk.addEventListener("tap", function() {
				mui.openWindow({
					url: 'chat.html',
					extras:{
							'activityid':activityid
						}
				});
			});
			});

			//点击图片
			mui.previewImage();
			//参加活动人的滑动
			mui('.mui-scroll-wrapper').scroll();
			
			//点击参加按钮
			var join = document.getElementById("join");
			join.addEventListener("tap", function() {
				mui.ajax('http://'+ip+'/xiaojv/Api/index.php?p=front&m=activity&a=join',{
					data:{'releaseid':releaseid,'sexlimit':sexlimit,'activitylastDate':activitylastDate,'activitylgnum':activitylgnum,'activitysnum':activitysnum},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；           
					success:function(data){
						if(data.msg==200){
							mui.toast(data.i);
							window.location.reload();
						}else{
							mui.toast(data.i);
						}
						
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			});
		</script>
	</body>

</html>